/**
 * @author:linjiye
 * @date: 2024/12/20
 * @desc:
 **/

import {Dimensions, Image, StyleSheet, Text, View} from 'react-native'
import React from 'react'
import {indexBanner} from "@/types/index";
import {SharedValue} from "react-native-reanimated";
import {Extrapolation, interpolate, useAnimatedStyle} from "react-native-reanimated/lib/typescript";
import Animated, {useAnimatedRef, useAnimatedScrollHandler, useSharedValue} from "react-native-reanimated";

type Props = {
    slideItem: indexBanner,
    index: number,
    scrollX: SharedValue<number>
}

const screenWidth = Dimensions.get('window').width;
const SliderItem = ({slideItem, index, scrollX}: Props) => {
    return (
        <Animated.View style={styles.itemWrapper} key={slideItem.id}>
            <Image source={{uri: slideItem.url}} style={styles.image}/>
            {/*<View style={styles.background}>*/}
            {/*    {slideItem.title && (<Text style={styles.title} numberOfLines={2}>{slideItem.title}</Text>)}*/}
            {/*</View>*/}
        </Animated.View>
    )
}

export default SliderItem

const styles = StyleSheet.create({
    itemWrapper: {
        position: "relative",
        width: screenWidth,
        justifyContent: "center",
        alignItems: "center"
    },
    image: {
        width: screenWidth - 30,
        height: 180,
        borderRadius: 20
    },
    background: {
        position: 'absolute',
        left: 30,
        right: 0,
        top: 0,
        width: screenWidth - 30,
        height: 180,
        borderRadius: 30,
        padding: 20
    },
    title: {
        color: 'white',
        fontSize: 14
    }
})
